<style>
  .picImg {
    width: 40px;
    height: 40px;
  }

  .input-unit {
    position: relative;
    top: -32px;
    left: 304px;
  }
  .el-dialog {
    width: 1100px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">
      <div class="filter-container">
        <el-button class="filter-item" type="primary" icon="el-icon-edit"
                   @click="handleChildAdd">新增
        </el-button>
      </div>
      <el-table v-loading="acclistLoading" :data="acclist" element-loading-text="正在查询中。。。" border fit
                highlight-current-row :header-cell-style="{background:'#92D3FF',color:'#fff'}">
        <!-- <el-table-column fixed align="center" min-width="100" label="费用ID号" prop="id"/> -->
        <el-table-column align="center" min-width="100" label="渠道编号" prop="channelNo"/>
        <el-table-column align="center" min-width="150" label="业务类型" prop="businessType">
          <template slot-scope="scope">
            <el-tag>{{{'1':'代收','2':'代付','3':'代收+代付'}[scope.row.businessType]}}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" min-width="150" label="银行联行号" prop="interBankNo"/> -->
        <el-table-column align="center" min-width="150" label="费用收取方法" prop="feeType">
          <template slot-scope="scope">
            <el-tag>
              {{{'0':'按笔收费',
              '1':'按金额收费',
              '2':'交易金额区间按笔收费',
              '3':'交易金额区间按金额收费',
              '4':'交易笔数区间按笔收费',
              '5':'交易笔数区间按金额收费'}[scope.row.feeType]}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" label="备注" prop="remark"/>
        <el-table-column fixed="right" align="center" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="mini"
                       @click="handleChildEdit(scope.row)">编辑
            </el-button>             -->
            <el-popover
            placement="top"
            width="200"
            trigger="manual"
            :ref="'popover-' + scope.row.id">
            <p>确定删除该数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="dofeeDelete(scope.row)">确定</el-button>
            </div>
              <el-button type="danger" size="mini" slot="reference" @click="$refs[`popover-` + scope.row.id].doShow()">删除</el-button>
            </el-popover>
            <el-button type="primary" size="mini" style="width:98px;"
                       @click="feedetailleForward(scope.row)">费用明细列表
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getAccList"/>-->
      <!--增加费用对话框-->
      <el-dialog :visible.sync="acclistDialogChildVisible" title="新增费用" append-to-body :close-on-click-modal="false">
        <el-form ref="editChildForm" :rules="editChildFormRules" :model="editChildForm" status-icon
                 label-position="right"
                 label-width="130px" style="width: 400px; margin-left:50px;">
          <!-- <el-form-item label="渠道编号" prop="channelNo">
            <el-input v-model="editChildForm.channelNo" placeholder="渠道编号"/>
          </el-form-item> -->
          <el-form-item label="业务类型" prop="businessType">
            <el-radio-group v-model="editChildForm.businessType">
              <el-radio :label="1">代收</el-radio>
              <el-radio :label="2">代付</el-radio>
              <el-radio :label="3">代收+代付</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="费用收取方法" prop="feeType">
            <el-radio-group v-model="editChildForm.feeType">
              <el-radio :label="0">按笔收费</el-radio>
              <el-radio :label="1">按金额收费</el-radio>
              <el-radio :label="2">交易金额区间按笔收费</el-radio>
              <el-radio :label="3">交易金额区间按金额收费</el-radio>
              <el-radio :label="4">交易笔数区间按笔收费</el-radio>
              <el-radio :label="5">交易笔数区间按金额收费</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="editChildForm.remark" placeholder="备注"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="acclistDialogChildVisible = false">取消</el-button>
          <el-button type="primary" @click="doChildEdit">确定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import { doGet, doPost } from '@/api'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import checkPermission from '@/utils/permission' // 权限判断函数
  export default {
    name: 'bank',
    components: { Pagination },
    filters: { },
    data() {
      return {
        textMap: {
          update: '编辑',
          create: '创建'
        },
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 20
        },

        acclistDialogVisible: false, // 费用列表对话框显示标志
        acclistLoading: false, // 查看费用列表loading标志
        acclist: [], // 费用列表数据
        acclistDialogChildVisible: false, // 增加费用对话框显示标志
        editDialogVisible: false,
        dialogStatus: undefined,
        editChildForm: {
          id: undefined,
          channelNo: undefined,
          businessType: undefined,
          interBankNo: undefined,
          feeType: undefined,
          remark: undefined
        },
        editChildFormRules: {
          // channelNo: [{required: true, message: '渠道编号不允许为空', trigger: 'blur'}],
          businessType: [{ required: true, message: '业务类型不允许为空', trigger: 'blur' }],
          interBankNo: [{ required: true, message: '银行联行号不允许为空', trigger: 'blur' }],
          feeType: [{ required: true, message: '费用收取方法不允许为空', trigger: 'blur' }]
        },
      }
    },
    created() {
      if (this.$route.query.channelNo == null) {
      return
  }
  const channelNo = this.$route.query.channelNo
  this.getAccList(channelNo)
  },
    methods: {
      checkPermission,
      // 获取费用列表
      getAccList(channelNo) {
        this.acclistLoading = true
        doGet('channel.html?op=feelist', { channelNo }).then(response => {
          this.acclist = response.rows
          this.total = response.rows.length
          this.acclistLoading = false
        }).catch(() => {
          this.acclist = []
          this.total = 0
          this.acclistLoading = false
        })
      },
      // 新增费用
      handleChildAdd() {
        this.editChildForm = {
          id: undefined,
          channelNo: this.$route.query.channelNo,
          businessType: 1,
          interBankNo: undefined,
          feeType: 0,
          remark: undefined
        },
          this.dialogStatus = 'create'
          this.acclistDialogChildVisible = true
          this.$nextTick(() => {
          this.$refs['editChildForm'].clearValidate()
        })
      },
      /**确定添加渠道费用 */
      doChildEdit() {
        this.$refs['editChildForm'].validate(valid => {
          if (valid) {
            doGet('channel.html?op=addfee', { channelNo: this.$route.query.channelNo, ...this.editChildForm })
              .then(response => {
                this.getAccList(this.$route.query.channelNo)
                this.acclistDialogChildVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '添加成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },
      /**删除渠道列表 */
      dofeeDelete(row) {
        doGet('channel.html?op=delfee', row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            const index = this.acclist.indexOf(row)
            this.acclist.splice(index, 1)
            this.total--
            this.$refs[`popover-` + row.id].doClose()
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      },
      /*跳转费用明细列表*/
      feedetailleForward(row) {
        this.$router.push({ path: '/feedetail', query: { id: row.id }})
      },

    }
  }
</script>
